<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="icon" href="image/public/Logo.ico">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/order.css">
    <link rel="stylesheet" href="css/bottom.css">
    <link rel="stylesheet" href="element/index.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vue/vue.min.js"></script>
    <script src="jquery/jquery-3.6.0.js"></script>
    <script src="js/iconfont.js"></script>
    <script src="element/index.js"></script>
    <script src="axios/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <style>
        .nav_li .a_text_all:hover {
            color: rgb(255, 128, 0);
        }

        .operation_li .a_text_all:hover {
            color: rgb(255, 128, 0);
        }

        .operation_li .a_text_all {
            color: rgb(0, 0, 0);
        }

        .nav_li .a_text_all {
            color: rgb(0, 0, 0);
        }

        .el-input__inner {
            left: 10px;
        }
    </style>
</head>

<body style="background-color: rgb(240, 240, 240);">
    <div id="app">
        <div class="head_max" style="background-color: white;">
            <!-- 小的盒子 -->
            <div class="head_min">
                <!-- 头部logo -->
                <div class="head_logo"></div>
                <!-- 导航条 -->
                <div class="navigation_bars">
                    <div class="nav_top">
                        <ul class="ul1">
                            <li class="operation_li" v-if="userInfo.length!=0">
                                <a href="myaccount_Myorder.html" class="a_text_all">你好,{{userInfo.user_name}}</a>
                                <span class="operation_span">|</span>
                            </li>
                            <li class="operation_li" v-else>
                                <a class="a_text_all a-out-login">登录</a>
                                <span class="operation_span">|</span>
                            </li>
                            <li class="operation_li">
                                <a href="#" class="a_text_all" @click="openFullScreen1"
                                    v-loading.fullscreen.lock="fullscreenLoading">退出</a>
                                <span class="operation_span">|</span>
                            </li>
                            <li class="ul2-li li">
                                <a href="#" class="a_text_all">Language</a>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                                <span>|</span>
                            </li>
                            <li class="li ul3-li">
                                <a href="#">CNY</a>
                                <svg class="icon" aria-hidden="true" style="margin-top: 4px;">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                                <span>|</span>
                            </li>
                            <li> <a href="#">常见问题</a> <span>|</span> </li>
                            <li class="ul4-li">
                                <img src="image/head/phone2.svg" width="13">
                                <a href="#">APP客户端</a>
                                <span>|</span>
                            </li>
                            <li>
                                <img src="image/head/phone.svg" width="15">
                                <a href="#" style="color:#ff8000; font-style: oblique;font-size: 14px;">400-9600-080</a>
                            </li>

                        </ul>
                        <!-- 二级菜单 -->
                        <ul class="ul2">
                            <li><a href="#">English</a></li>
                            <li><a href="#">繁體中文</a></li>
                            <li><a href="#">简体中文</a></li>
                            <li style="border: 0;"><a href="#">日本语</a></li>
                        </ul>
                        <ul class="ul3">
                            <li><a href="#">CNY</a></li>
                            <li><a href="#">USD</a></li>
                            <li><a href="#">HKD</a></li>
                            <li style="border: 0;"><a href="#">JPY</a></li>
                        </ul>
                        <div class="ul4">
                            <div class="download-1">APP预订，即时简单快捷</div>
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="nav_bottom">
                        <ul>
                            <li> <a href="#" style="color: #ff8000;">首页</a></li>
                            <li class="li">
                                <a href="#">别墅公寓</a>
                                <svg class="icon" aria-hidden="true" style="margin-top: 6px; font-size: 12px;">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                            </li>
                            <li> <a href="#">甄选酒店</a></li>
                            <div class="new"></div>
                            <li> <a href="#">私享小团</a></li>
                            <li> <a href="#">限时优惠</a></li>
                            <li> <a href="#">晒单</a></li>
                            <li> <a href="#">旅游故事</a></li>
                            <li> <a href="#">度假攻略</a></li>
                            <li> <a href="#">VVIP</a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="bodyBox" v-for="(villa,i) in villa">
            <div class="Cdir">
                <div>
                    <a href="index.html">首页 > </a>
                    <a href="commodity.html" v-for="(tit,index) in titles"> {{tit}} ></a>
                    <span>预订</span>
                </div>
            </div>

            <div class="order-p">
                <span>订单详情</span>
            </div>

            <div class="maran" style="margin-top: 10px;">
                <div class="maran-left" style="background-color: white;">
                    <!-- <div class="maran-left-top">
                        <img src="image/order/order1.svg" alt="">
                        <span>
                            现在
                            <a id="login-btn" href="javascript:void(0);">登录</a>
                            可享受评论返现活动，加入<a href="/vip">付费会员</a>享更多特权
                        </span>
                    </div> -->
                    <div class="maran-left-body">
                        <div class="maran-left-body-one">
                            <div>
                                <img :src=`image/villa_img/${villa.villa_introduce}` alt="">
                            </div>
                            <div style="padding-left: 20px;">
                                <p style="font-size: 24px;line-height: 24px;">{{ villa.villa_name }}</p>
                                <span style="font-size: 12px;color: #999;line-height: 40px;">
                                    {{villa.villa_place}}
                                </span><br>
                                <span class="landscape">景观：
                                    <span v-for="(landscape,i) in landscape" :title="landscape.vnorms[0].vnorms_name">
                                        {{ landscape.vnorms[0].vnorms_name }}，
                                    </span>
                                </span>
                                <br>
                                <span style="line-height: 30px;">入住时间/退房时间：15:00后/11:00前</span><br>
                                <span class="landscape">免费服务：
                                    <span v-for="(villas,i) in villa.vsitems" v-if="villa.vsitems[i].vsitem_price<=0">
                                        {{ villa.vsitems[i].vsitem_name}}
                                    </span>
                                </span>
                            </div>
                        </div>
                        <h2>入住详情</h2>
                        <div class="maran-left-body-two">
                            <div>
                                <div>
                                    <span class="spX">*</span>
                                    <span>入住时间：</span>
                                    <el-date-picker v-model="value1" :readonly="true" type="date" placeholder="选择日期"
                                        style="width: 140px;">
                                    </el-date-picker>
                                </div>
                                <div>
                                    <span class="spX">*</span>
                                    <span>退房时间：</span>
                                    <el-date-picker v-model="value2" :readonly="true" type="date" placeholder="选择日期"
                                        style="width: 140px;margin-top: 3px;">
                                    </el-date-picker>
                                </div>
                            </div>
                            <div style="padding-left: 10px;">
                                <span>房型：</span>
                                <el-select style="margin-right: 10px;width: 180px;" v-model="villa.house_apartment"
                                    placeholder="入住人数">
                                    <el-option :value="villa.house_apartment"></el-option>
                                </el-select>
                            </div>
                            <div style="padding-left: 10px;">
                                <span>成人：</span>
                                <el-select style="margin-right: 30px;width:80px;" v-model="opt2" placeholder="入住人数">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <span style="margin-left: 30px;">儿童：</span>
                                <el-select style="margin-right: 30px;width:80px;" v-model="opt3" placeholder="入住人数">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                                <span style="margin-left: 30px;">婴儿：</span>
                                <el-select style="margin-right: 30px;width:80px;" v-model="opt4" placeholder="入住人数">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <h2>预订人信息</h2>
                        <div class="maran-left-body-three">
                            <div>
                                <span class="spX">*</span>
                                <span>姓名：</span>
                                <input type="text" id="txt1" v-model="name" placeholder="请填写联系人姓名"
                                    style="width: 358px;">
                                <span class="spShowOne"
                                    style="color: red;font-size: 14px;visibility: hidden;">请填写您的真实姓名!</span>
                            </div>
                            <div style="display: flex;align-items: center;">
                                <span class="spX">*</span>
                                <span style="padding-left: 2px;">手机：</span>
                                <div>
                                    <el-select style="margin-right: 30px;width:80px;margin-left:8px;" v-model="area"
                                        placeholder="国家/地区">
                                        <el-option v-for="codes in areaCode" :key="codes.label" :value="codes.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <input id="txt2" type="text" v-model="phone"
                                    style="width: 233px;margin-left: 15px;padding-top: 4.5px;padding-bottom: 2.5px;border-left: none;border: 1px solid #dcdfe6;"
                                    placeholder="请填写手机号，方便您接收短信通知">
                                <span class="spShowTwo"
                                    style="color: red;font-size: 14px;padding-left: 4px;line-height: 30px;visibility: hidden;">请填写您手机号码!
                                </span>
                            </div>
                            <div>
                                <span class="spX">*</span>
                                <span>邮箱：</span>
                                <input id="txt3" type="text" v-model="email" placeholder="输入邮箱地址" style="width: 358px;">
                                <span class="spShowThree"
                                    style="color: red;font-size: 14px;visibility: hidden;">请填写您的邮箱!</span>
                            </div>
                        </div>
                        <h2>预订机票（享全网最低价）</h2>
                        <div class="maran-left-body-four" style="padding-bottom: 20px;">
                            <div>
                                <input type="checkBox" id="ck">
                                <span>我需要订机票</span>
                            </div>
                            <div>
                                机票预订服务说明：<br>
                                1、第六感可为您提供国际机票的查询与预订服务；2、如您勾选此服务，第六感咨询顾问将会和您确认乘机人员信息，您需要准备所有乘机人员的姓名、姓名拼音、护照号、护照照片，并在您的个人中心的订单详情中完成添加；3、如您有任何疑问，请拨打400-9600-080进行咨询
                            </div>
                            <div class="fourA" style="display: none;">
                                <div>乘机信息</div>
                                <div style="display: flex;">
                                    <span>航程类型</span>
                                    <div style="margin-left: 60px;display: flex;">
                                        <div style="margin-right: 30px;display: flex;align-items: center;">
                                            <input type="radio" class="rd1" name="r" checked>
                                            <div>单程</div>
                                        </div>
                                        <div style="display: flex;align-items: center;">
                                            <input type="radio" class="rd2" name="r">
                                            <div>往返</div>
                                        </div>
                                    </div>

                                </div>
                                <div>去程信息</div>
                                <div id="stil">
                                    <span style="margin-left:0;">出发城市</span>
                                    <input type="text" placeholder="填写城市名" style="padding-left: 10px;">
                                    <span>到达城市</span>
                                    <input type="text" placeholder="填写城市名" style="padding-left: 10px;">
                                    <span>出发日期</span>
                                    <el-date-picker v-model="value3" type="date" placeholder=" 选择日期"
                                        style="width: 120px;">
                                    </el-date-picker>
                                </div>
                            </div>
                        </div>
                        <h2>价格与条款</h2>
                        <div class="maran-left-body-txt" style="padding-bottom: 30px;">
                            <p style="color: #ff0101;">您选择的时间暂无价格，详情请咨询</p>
                            <p style="line-height: 32px;">
                                儿童条款 ：Club Med是按照人数、年龄收费，预订之前请按照每间房实际入住人数、年龄进行查询、预订、支付。<br>
                                预订/取消条款 ：预订入住日前8天及以上通知，不收取损失费用； 预订入住日前3~7天通知（包含第3天和第7天），收取总价的50%的损失费用；
                                预订入住日前2天及以内通知（包含第2天），收取总价的100%损失费用。
                            </p>
                            <p style="color: #ff8000;line-height: 51px;">温馨提醒：预订过程中部分别墅可能存在无房情况，可先拨打400-9600-080咨询</p>
                        </div>
                        <div class="smit">
                            <div>
                                <input type="checkBox" class="puta" style="cursor: pointer;">
                                <span>前往阅读</span>
                                <a href="fqa.html" style="text-decoration: none;">
                                    <span style="color: #ff8000;cursor: pointer;">用户预订条款</span>
                                </a>
                            </div>
                            <div>
                                <!-- <a href="javascript:;" id="hint_next">该别墅需要确认房态，请先提交咨询</a> -->
                                <a href="javascript:;" id="hint_next">确定已阅读过以上条款</a>
                                <!-- :href="'pay.html?total='+app.total+'&order_no='+app.o6 -->
                                <a href="#" @click="AddOrder" id="submit_inquire">同意以上条款进入支付</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="maran-right">
                    <div class="maran-right-top">
                        <div class="mop" style="padding-top: 20px;">
                            <div><img src="image/order/校验_check-one.svg" alt=""></div>
                            <div class="mop-txt">
                                <span>价格</span>
                                如有比我们更优价格，差价双倍赔付
                            </div>
                        </div>
                        <div class="mop">
                            <div><img src="image/order/校验_check-one.svg" alt=""></div>
                            <div class="mop-txt">
                                <span>品质</span>
                                所有别墅均亲自考察，保障品质
                            </div>
                        </div>
                        <div class="mop">
                            <div><img src="image/order/校验_check-one.svg" alt=""></div>
                            <div class="mop-txt">
                                <span>服务</span>
                                评论有礼全程贴心咨询，一站式为您服务
                            </div>
                        </div>
                        <div class="mop">
                            <div><img src="image/order/校验_check-one.svg" alt=""></div>
                            <div class="mop-txt">
                                <span>注册有礼</span>
                                只需注册，即可获得900元抵用券
                            </div>
                        </div>
                        <div class="mop">
                            <div><img src="image/order/校验_check-one.svg" alt=""></div>
                            <div class="mop-txt" style="padding-bottom: 20px;">
                                <span>评论有礼</span>
                                轻松点评，即可获得88元抵用券
                            </div>
                        </div>
                    </div>
                    <div class="maran-right-bottom">
                        <div>
                            <div style="height: 60px;"></div>
                            <div style="text-align: center;line-height: 20px;">
                                <p>您的品质之旅</p>
                                <p>从第六感私享定制开启</p>
                                <div style="height: 20px;"></div>
                                <a href="#">立即定制</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom_box">
                <div class="bottom_details">
                    <a href="">
                        <div class="img_Logo"></div>
                    </a>
                    <div class="bottom_text">
                        第六感-别墅公寓、奢华酒店、私人定制。我们推崇与众不同的度假理念，提供包括度假别墅、短租公寓和奢华酒店在内的多元化住宿选择，另有私人包机，行程定制，豪华游轮等预订服务。
                        第六感致力于满足您的个性化需求，为您提供专业的一站式度假服务。
                    </div>
                    <ul class="ul_css bottom_ul">
                        <li class="bottom_li">
                            <div class="bottom_ico_vx"></div>
                            <p class="bottom_p_css bottom_text">微信订阅号</p>
                        </li>
                        <li class="bottom_li">
                            <div class="bottom_ico_blog"></div>
                            <p class="bottom_p_css bottom_text">官方微博</p>
                        </li>
                        <li class="bottom_li">
                            <div class="bottom_ico_tmallx"></div>
                            <p class="bottom_p_css bottom_text">官方天猫</p>
                        </li>
                    </ul>
                </div>
                <div class="bottom_service">

                    <div class="service_box">
                        <div class="service_ico_box">
                            <div class="service_phone_ico">
                            </div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">400-9600-080</span>
                                <p class="bottom_text">7x24 小时在线服务</p>
                            </div>
                            <div class="service_message_ico"></div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">服务支持</span>
                                <p class="bottom_text">Rookie团队</p>
                            </div>
                        </div>
                        <div class="service_ico_box">
                            <div class="service_text_box">
                                <span class="bottom_text service_text">市场合作</span>
                                <p class="bottom_text">marketing@Rookie.com</p>
                            </div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">房源合作</span>
                                <p class="bottom_text">partnership@Rookie.com</p>
                            </div>
                        </div>
                        <ul class="ul_css" style="float:left;margin-top: 13px;">
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">关于团队</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">常见问题</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">服务理念</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">网站地图</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">加入我们</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">同行注册</span>
                                </a>
                            </li>
                        </ul>
                        <div class="service_reserve_box">
                            <div class="reserve_img"></div>
                            <p class="bottom_text reserve_text">APP预订，即时简单快捷</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="business_license">
                <div class="bottom_box">
                    <div class="business_license_text">Copyright © 2013-2022 上海墅假网络科技有限公司 沪ICP备14011210号 营业执照</div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/order.js"></script>
    <script src="js/order2.js"></script>

</body>

</html>